<template>
  <div>
  <div class="header_my">
    <div class="hd_main cle">
      <div class="logo">
          <img :src="logo" alt="茶叶网" style="width: 200px;height: 64px">
      </div>
      <div class="search_box">
        <form action="#/search" id="search_fm" method="get" name="search_fm">
          <input class="sea_input" type="text" name="q" id="small-searchterms" autocomplete="off" placeholder="搜索所有商品" >
          <el-button type="primary" icon="el-icon-search" class="search">搜索</el-button>
        </form>
      </div>
      <div class="head_search_hot">
        <span>热搜榜：</span>
        <a href="#/search/%E5%A4%A7%E7%BA%A2%E8%A2%8D" target="_blank" rel="nofollow">大红袍</a><a href="#/search/%E9%93%81%E8%A7%82%E9%9F%B3" target="_blank" rel="nofollow">铁观音</a><a href="#/search/%E9%87%91%E9%AA%8F%E7%9C%89" target="_blank" rel="nofollow">金骏眉</a></div>
      <div class="head_right">
        <div class="head_cart" id="header_cart">
          <el-button type="danger" @click="cart">购物车</el-button>
        </div>
      </div>
    </div>
    <div class="hd_nav">
      <div class="hd_nav_bd cle">
        <div class="hd_nav">
          <div class="hd_nav_bd cle" v-if="show">
            <div class="main_nav" id="main_nav">
              <div class="main_nav_link">
                <a>
                  全部商品分类
                </a>
              </div>

            </div>
            <div class="main_cate_hb  show ">
              <ul>
                <li class="a1">
                  <dl>
                    <dt>热销</dt>
                    <dd><a href="#">金骏眉</a><a href="#">铁观音</a><a href="#">大红袍</a><a href="#">龙井</a><a href="#">黄山毛峰</a><a href="#">滇红</a><a href="#">漳平水仙</a><a href="#">正山小种</a></dd>
                  </dl>
                  <dl>
                    <dt>茶类</dt>
                    <dd><a href="#">绿茶</a><a href="#">乌龙茶</a><a href="#">红茶</a><a href="#">白茶</a><a href="#">普洱</a><a href="#">花茶</a></dd>
                  </dl>

                  <div class="pop">
                    <dl>
                      <dl>
                        <dt><a href="#" class="ui-link" style="margin-left: 0">绿茶</a></dt>
                        <dd style="padding-top:2px;"><a href="#" class="ui-link">龙井</a><a href="#/cat-40" class="ui-link">黄山毛峰</a><a href="#/cat-51" class="ui-link">碧螺春</a><a href="#/cat-1025" class="ui-link">雀舌</a><a href="#/cat-1026" class="ui-link">太平猴魁</a><a href="#/cat-1028" class="ui-link">六安瓜片</a><a href="#/cat-1027" class="ui-link">安吉白茶</a></dd>
                      </dl>
                      <dl>
                        <dt><a href="#" class="ui-link" style="margin-left: 0">乌龙茶</a></dt>
                        <dd style="padding-top:2px;"><a href="#" class="ui-link">铁观音</a> <a href="#/cat-15" class="ui-link">武夷岩茶</a> <a href="#/cat-25" class="ui-link">漳平水仙</a></dd>
                      </dl>
                      <dl>
                        <dt><a href="#/cat-16" class="ui-link" style="margin-left: 0">红茶</a></dt>
                        <dd style="padding-top:2px;"><a href="#/cat-17" class="ui-link">金骏眉</a> <a href="#/cat-18" class="ui-link">正山小种</a><a href="#/cat-47" class="ui-link">云南滇红</a><a href="#/cat-46" class="ui-link">祁门红茶</a><a href="#/cat-48" class="ui-link">政和工夫</a><a href="#/cat-49" class="ui-link">坦洋工夫</a></dd>
                      </dl>
                      <dl>
                        <dt><a href="#/cat-19" class="ui-link" style="margin-left: 0">白茶</a></dt>
                        <dd style="padding-top:2px;"><a href="#/cat-20" class="ui-link">白牡丹</a> <a href="#/cat-21" class="ui-link">牡丹王</a> <a href="#/cat-22" class="ui-link">白毫银针</a><a href="#/cat-52" class="ui-link">贡眉</a></dd>
                      </dl>
                      <dl>
                        <dt><a class="ui-link" style="margin-left: 0">普洱</a></dt>
                        <dd style="padding-top:2px;"><a href="#/cat-36" class="ui-link">生茶</a><a href="#/cat-37" class="ui-link">熟茶</a></dd>
                      </dl>
                      <dl>
                        <dt><a href="#/cat-43" class="ui-link" style="margin-left: 0">花茶</a></dt>
                        <dd style="padding-top:2px;"><a href="#/cat-34" class="ui-link">茉莉花茶</a> <a href="#/cat-41" class="ui-link">花草茶</a></dd>
                      </dl>
                    </dl>
                    <dl>
                      <dt class="pt">价格</dt>
                      <dd><a href="#/search?g=54&amp;specs=1952" class="ui-link" rel="nofollow">1-100元</a> <a href="#/search?g=54&amp;specs=1953" class="ui-link" rel="nofollow">101-300元</a> <a href="#/search?g=54&amp;specs=1954" class="ui-link" rel="nofollow">301-500元</a> <a href="#/search?g=54&amp;specs=1955" class="ui-link" rel="nofollow">500以上</a></dd>
                    </dl>

                  </div>
                </li>
              </ul>
            </div>
          </div>
            <ul class="sub_nav cle" id="sub_nav" >
              <li v-for="site in menu"><a :href="site.key" >{{site.name}}</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  <div class="index-banner" v-if="show">
      <el-carousel  indicator-position="outside" arrow="always" style="margin-left: 29% ;width: 50%">
        <el-carousel-item v-for="item in urls" :key="item"  >
          <el-image :src="item" fit="fill" ></el-image>
        </el-carousel-item>
      </el-carousel>
  </div>
  </div>
</template>

<script>
  import {menus} from '@/api/index'
  import logo from '@/assets/logo.png'
  export default {
        name: "middle",

    data () {
          return{
            urls: [
              'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/53995b97f22ff9bad82d57f50f6003024ec63d876488f4199d46e7356a64c8affd6a5f1b133f288cd72b49f741949cc0?pictype=scale&from=30113&version=3.3.3.3&uin=182478932&fname=1%20%281%29.jpg&size=450',
              'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/dc7e0c314f87ab9d2eb4ca61c07df36029608ee53e528cac3b0b8f28d4e99e72d70694e1bc5f54ff33c52a6e73197bc3?pictype=scale&from=30113&version=3.3.3.3&uin=182478932&fname=1%20%282%29.jpg&size=450',
              'https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/007065bef8888f28a61263b48ff5cd29cf7f82d9493f8cbf0d91d12fcda7aeb20f2409c871fa390743f6b05c6fa050fd?pictype=scale&from=30113&version=3.3.3.3&uin=182478932&fname=1%20%283%29.jpg&size=450',
              'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
              'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
              'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
              // 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
            ],
            logo:logo,
        menu:[]
      }
    },
    props:{show:Boolean},
    created () {
      this.initMenu()
    },
    methods:{
      initMenu(){
        this.menu = menus

        console.log(this.menu)
      },
      cart(){
        this.$router.push({ path:'/cart'  })


      }
    }
    }
</script>

<style scoped>

  .search{
      color: #FFF;
    background-color: #c3625d;
    border-color:  #c3625d ;
    width: 130px;
  }
  .head_cart .more_bd, .head_cart .tit span i {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
  }

  .head_cart .tit em, .head_cart .tit span {
    font-size: 12px;
    position: absolute;
    text-align: center;
  }

  .head_cart .tit:hover, .header .hd_main .logo p a:hover, .main_nav_link a:hover {
    text-decoration: none;
  }

  .header_my {
    background: #fff;
  +zoom:1;
  }

  .header_my .hd_main {
    width: 1200px;
    height: 98px;
    margin: 0 auto;
    position: relative;
    z-index: 999;
  }

  .header_my .hd_main .logo {
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 2;
  }

  .header_my .hd_main .logo p {
    width: 200px;
    height: 62px;
    overflow: hidden;
  }

  .header_my .hd_main .logo p a {
    display: block;
    width: 166px;
    height: 0;
    padding-top: 62px;
    overflow: hidden;
    margin: 0 auto;
  }

  .header_my .head_right {
    position: absolute;
    right:220px;
    top: 0;
    padding-top:20px;
  }
  .header_my .hotline {
    position: absolute;
    right:0px;
    top: 0;
    padding-top:18px; font-size:14px; color:#b5b5b5; line-height:20px; font-weight: lighter; text-align:right;
  }
  .header_my .hotline i { font-size:14px;
  }
  .header_my .hotline em { font-size:22px; color:#b0352f; font-weight:bold;font-family: Arial;
  }

  .head_cart .tit {
    display: block;
    width: 123px;
    height: 32px;
    padding-top:6px;
    position: relative;
    z-index: 10;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 14px;
    color: #999;
  }

  .head_cart .tit b {
    margin: 0 8px 0 20px;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    top: -1px;
  }

  .head_cart .tit span {
    right: 6px;
    top: 9px;
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .head_cart .tit span i {
    display: inline-block;
    width: 20px;
    height: 20px;
    -ms-transition: all .3s;
    transition: all .3s;
  }

  .head_cart .tit em {
    left: 25px;
    top: -8px;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 1px 1px 1px rgba(0,0,0,.3);
    background-color: #b0352f;
    border-radius: 10px;
    padding: 0 5px;
    line-height: 16px;
    visibility: hidden;
  }

  .head_cart_hover .tit {
    border-color: #b0352f;
    color: #b0352f;
  }

  .head_cart_hover .tit span i {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .head_cart .more_bd {
    position: absolute;
    right: 0;
    top: 48px;
    width: 230px;
    visibility: hidden;
    opacity: 0;
    -ms-transition: all .3s;
    transition: all .3s;
    background-color: #fff;
    box-shadow: 1px 1px 3px rgba(100,100,100,.3);
  }

  .head_cart_hover .more_bd {
    visibility: visible;
    opacity: 1;
    top: 72px;
  }

  .head_cart .more_bd .load {
    height: 100px;
  }

  .hd_nav {
    background-color: #605046;
    height: 42px;
  }

  .hd_nav .hd_nav_bd {
    width: 1200px;
    position: relative;
    z-index: 990;
    margin: 0 auto;
  }

  .hd_nav .main_nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 991;
  }

  .main_nav_link {
    width: 200px;
    height: 42px;
    color: #fff;
    background-color: #b0352f;
    overflow: hidden;
  }

  .main_nav_link a {
    display: block;
    padding: 10px;
    height: 22px;
    font-size: 14px;
    text-align: center;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
  }

  .main_nav_link a:hover {
    color: #fff;
  }

  .main_nav_link a i {
    margin-right: 5px;
    font-size: 14px;
  }

  .hd_nav .sub_nav {
    float: left;
    padding-left: 200px;
    width: 1000px;
  }

  .hd_nav .sub_nav li {
    float: left;
    height: 42px;
    overflow: hidden;
    font-size: 14px;
    padding-left: 0px;
  }

  .hd_nav .sub_nav li a {
    display: inline-block;
    height: 42px; line-height:42px;
    overflow: hidden; width: 110px; text-align: center;
    color: #fff;
  }

  .hd_nav .sub_nav li a:hover, .hd_nav .sub_nav li.current a {
    color: #fff;
    background-color: #b0352f;
    text-decoration: none;
  }

  .header_my .search_box {
    position: absolute;
    /*left: 370px;*/left:270px;
    top: 20px;
    width: 510px;
    height: 36px;
    border: 2px solid #c3625d;
    background-color: #fff;
    overflow: hidden;
    box-shadow: -1px 1px 3px rgba(200,200,200,.4);
  }

  .header_my .search_box .sea_input {
    float: left;
    margin: 8px 8px 0;
    width:364px;
    height: 20px;
    line-height: 20px;
    color: #bbb;
    outline: 0;
    border: none;
    background: 0 0;
  }

  .header_my .search_box .sea_submit {
    font-size: 0;
    float: right;
    border: none;
    width: 129px;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
  }

  .header_my .search_box .sea_submit:hover {
    opacity: .9;
  }

  .search_result {
    display: none;
    position: absolute;
    border: 1px solid #b0352f;
    box-shadow: 1px 1px 3px rgba(0,0,0,.3);
    margin: 30px 0 0 -9px;
    width: 380px;
    background-color: #fff;
    z-index: 2001;
    overflow-x: hidden;
  }

  .search_result li {
    padding: 5px 8px;
    cursor: default;
    background-color: #fff;
    color: #666;
  }

  .search_result li.on {
    background-color: #f4f4f4;
  }

  .head_search_hot {
    position: absolute;
    top: 70px;
    left: 270px;
    width: 450px;
    height: 16px;
    overflow: hidden;
  }

  .head_search_hot span {
    color: #999;
  }

  .head_search_hot a {
    margin: 0 8px 0 5px;
    color: #666;
  }

  .head_search_hot a.red, .head_search_hot a:hover {
    color: #b0352f;
  }

  .main_cate {
    width: 1200px;
    height: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 42px;
    z-index: 1999;
    overflow: hidden;
    background-color: #fff;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
  }

  .main_cate_l {
    float: left;
    border-right: 1px solid #eee;
    height: 260px;
  }

  .main_cate_l ul {
    height: 260px;
    float: left;
    overflow: hidden;
  }

  .main_cate_l li {
    float: left;
    width: 230px;
    padding: 8px 0 0 20px;
    background-color: #fff;
  }

  .main_cate_l li h3 {
    padding: 7px 0 4px;
  }

  .main_cate_l li h3 a {
    color: #000;
    font-size: 14px;
  }

  .main_cate_l li .bd {
    margin-right: -10px;
    /*height: 70px;*/
    overflow: hidden;
  }

  .main_cate_l li .bd a {
    color: #888;
    display: inline-block;
    margin-right: 14px;
    line-height: 28px;
  }

  .main_cate_l .other li .bd {
    height: 37px;
  }

  .main_cate_l li .bd a:hover {
    color: #b0352f;
  }

  .main_cate_l li.current, .main_cate_l li:hover {
    background-color: #f1f1f1;
  }

  .main_cate_hover .main_cate {
    height: 260px;
    opacity: 1;
    visibility: visible;
  }

  .main_cate_r {
    float: right;
    width: 675px;
  }

  .main_cate_r li, .main_cate_r li img {
    height: 130px;
    width: 225px;
  }

  .main_cate_r ul {
    height: 260px;
  }

  .main_cate_r li {
    float: left;
  }
  /* CSS Document */
  .show {display:block;}
  .hide {display:none;}
  .main_cate_hb { width:200px;  background:#b0352f; position:absolute; left: 0px; top: 42px; z-index: 1999;}

  .main_cate_hb ul li{
    clear: both;
    zoom: 1;
    cursor: default;
    padding-bottom: 10px;
  }
  .main_cate_hb ul li .tx{
    line-height:40px;
    height: 40px; border-top:#a9423d solid 1px; border-bottom:#a9423d solid 1px;
    background-color: #ad4b46;
    padding-left: 10px;
    /*background-image: url(../images/header_my_bg1.png);*/
    background-repeat: no-repeat;
    background-position: right center;
  }
  .main_cate_hb ul li .tx a {
    font-size: 14px;
    color: #ffffff;
    font-family: \5FAE\8F6F\96C5\9ED1, \9ED1\4F53;
    -webkit-transition: color 0.1s ease-out 0s;
    -moz-transition: color 0.1s ease-out 0s;
    -ms-transition: color 0.1s ease-out 0s;
    -o-transition: color 0.1s ease-out 0s;
    transition: color 0.1s ease-out 0s;
  }
  .main_cate_hb ul li .tx a i {
    height: 25px;
    width: 25px;
    background-position: 0px 0px;
    float: left;
    margin-right: 10px;
    line-height: 25px;
    margin-top: 9px;
    text-decoration: none;
  }
  /*.main_cate_hb ul li.a1 .tx a i {background-image: url(../images/header_my_ico1.png);}*/
  /*.main_cate_hb ul li.a2 .tx a i {background-image: url(../images/header_ico2.png);}*/
  /*.main_cate_hb ul li.a3 .tx a i {background-image: url(../images/header_ico3.png);}*/
  .main_cate_hb ul li dl{
    clear: both;
    color: #ffffff;
    overflow: auto;
    zoom: 1;
    padding-top: 10px;
  }
  .main_cate_hb ul li dl a{
    color: #e7c5c4;
    line-height: 22px;
    float: left;
    margin-right: 6px;
    margin-left: 6px;
    white-space: nowrap;
    padding:5px 0;
    -webkit-transition: color 0.1s ease-out 0s;
    -moz-transition: color 0.1s ease-out 0s;
    -ms-transition: color 0.1s ease-out 0s;
    -o-transition: color 0.1s ease-out 0s;
    transition: color 0.1s ease-out 0s;
  }
  .main_cate_hb ul li dt {
    width: 30px;
    padding-left: 10px;
    float: left;
    padding-top: 7px;
  }
  .main_cate_hb ul li dd {
    float: left;
    width: 160px;
    line-height: 22px;
    padding-bottom:2px
  }

  .main_cate_hb:hover ul {
    display: block;
  }
  .main_cate_hb ul li:hover {
    background-color: #fcfcfc;
    cursor:default;
  }
  .main_cate_hb ul li:hover .tx {
    background-color: #f0f0f0; border-top:1px solid #f0f0f0; border-bottom:1px solid  #f0f0f0;
  }
  .main_cate_hb ul li:hover .tx a {
    color: #333333;
  }
  .main_cate_hb ul li:hover .tx a i {
    background-position: 0px -25px;
  }
  .main_cate_hb ul li:hover dl {
    color: #6e6e6e;
  }
  .main_cate_hb ul li:hover a {
    color: #666666;
  }
  .main_cate_hb ul li:hover a:hover{
    color: #cd0606;
  }



  /***pop****/

  .main_cate_hb ul li .pop{
    display:none;
    background-color: #fcfcfc;
    width: 640px;
    min-height: 440px;
    position: absolute;
    left: 200px;
    top: 0px;
    -webkit-box-shadow: 4px 4px 5px -1px #cacaca;
    -moz-box-shadow: 4px 4px 5px -1px #cacaca;
    box-shadow: 4px 4px 5px -1px #cacaca;
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    border: solid 2px #599900\9;
    border-left: none\9;
    border-top: none\9;
    height: 464px\9;
    opacity:1;
  }

  .main_cate_hb ul li .pop dl{
    padding-top: 0px;
    padding-bottom: 3px;
    color: #666666;
  }
  .main_cate_hb ul li .pop dl:hover{
    background-color: #f3f3f3;
  }
  .main_cate_hb ul li .pop dl a{
    color: #666666;
    margin-right: 12px;
    margin-left: 12px;
  }
  .main_cate_hb ul li .pop dl a.un {
    color: #a5a5a5;
  }

  .main_cate_hb ul li .pop dt {
    width: 72px;
    padding-left: 10px;
    padding-top:2px;
  }
  .main_cate_hb ul li .pop dt.pt { padding-top:7px;}
  .main_cate_hb ul li .pop dd {
    width: 565px;
    margin-left: -12px; padding-top:0px; height:26px; line-height:26px; overflow:hidden;
  }
  .main_cate_hb ul li .pop .act  {
    /*position:absolute;
      bottom:15px;*/
    height: 80px;
    padding-top: 10px;
    width: 640px;
    overflow: hidden;
  }
  .main_cate_hb ul li:hover .pop{
    display: block;
    left: 200px;
    top: 0px;
  }
  .main_cate_hb ul li:hover .pop dl a.un{
    color: #a5a5a5;
    text-decoration: none;
  }

  /***pop***/

</style>
